<template>
  <div v-loading="loading">
    <el-form :model="formData" :rules="formRules" ref="emailRef" class="emailForm">
      <el-form-item label="邮箱标题" prop="subject">
        <el-input v-model="formData.subject" placeholder="请输入邮箱标题"></el-input>
      </el-form-item>
      <el-form-item label="邮箱内容" prop="text">
        <el-input type="textarea" v-model="formData.text" placeholder="请输入邮箱内容"></el-input>
      </el-form-item>
      <el-form-item label="接收人" prop="mergeStatus">
        <el-select
          v-model="signStatus"
          placeholder="请选择学生状态"
          clearable
          size="small"
          multiple
          @change="changeSignStatus"
        >
          <el-option
            v-for="(item, index) in statusOptions"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sendHandle">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {sendMessage} from "@/api/campSystem/campOper";

  export default {
    name: "EmailNotice",
    props: {
      idFu: [String, Number]
    },
    data() {
      return {
        loading: false,
        formData: {
          campsiteId: null,
          subject: null,
          text: null,
          mergeStatus: null
        },
        signStatus: [],// 学生状态select框绑定值
        statusOptions: [], // 营地学生报名状态列表
        formRules: {
          subject: [
            {required: true, message: '请输入邮箱标题', trigger: 'blur'}
          ],
          text: [
            {required: true, message: '请输入邮箱内容', trigger: 'blur'}
          ],
          mergeStatus: [
            {required: true, message: '请选择学生状态', trigger: 'change'}
          ],
        }
      }
    },
    created() {
      this.formData.campsiteId = this.idFu;
      this.getDicts("camp_signup_status3").then(response => {
        this.statusOptions = response.data;
      });
    },
    methods: {
      // 发送按钮
      sendHandle() {
        this.$refs['emailRef'].validate((valid) => {
          if (!valid) return;
          this.loading = true;
          sendMessage(this.formData)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                this.loading = false;
                return this.msgError(response.msg);
              }
              this.resetHandle();
              this.msgSuccess(response.msg)
              this.loading = false;
            })
            .catch(error => {
              console.log(error);
              this.loading = false;
            });
        })
      },
      // 重置表单
      resetHandle(){
        this.$refs['emailRef'].resetFields();
        this.signStatus = [];
      },
      // 改变学生状态-搜索框
      changeSignStatus(val) {
        this.formData.mergeStatus = val.join('#');
      },
    },
    watch: {
      idFu(val) {
        this.formData.campsiteId = val;
      },
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .emailForm {
    width: 70%;
    max-width: 680px;

    .el-textarea__inner {
      min-height: 100px !important;
    }

    .el-select {
      width: 100%;
    }
  }
</style>
